<template>
    <div>
        <div class="container">
            <h1>修改密码</h1>
            <el-divider></el-divider>

            <div class="staffForm">
                <el-form :model="staff" :rules="ruleForm" ref="staff">
                    <el-form-item label="旧密码" prop="oldPwd">
                        <el-input
                            v-model="staff.oldPwd"
                            placeholder="请输入旧密码"
                            prefix-icon=" el-icon-view"
                            type="password"
                            style="width:200px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input
                            v-model="staff.newPwd"
                            placeholder="请输入新密码"
                            prefix-icon=" el-icon-view"
                            type="password"
                            style="width:200px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPass">
                        <el-input
                            v-model="staff.confirmPwd"
                            placeholder="请输入新密码"
                            prefix-icon=" el-icon-view"
                            type="password"
                            style="width:200px"
                        ></el-input>
                    </el-form-item>
                    <el-button type="text" @click="updatePwd()">确认修改</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'UpdatePwd',
    data() {
        // 密码的校验方法
        let validateOldPass = (rule, value, callback) => {
            if (value) {
                let param = new URLSearchParams();
                param.append('staff_password', this.staff.oldPwd);
                param.append('staff_number', localStorage.getItem('user_name'));
                this.$axios({
                    method: 'post',
                    url: 'staff/queryByPwd',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).then(res => {
                    if (res.data.code == 1) {
                        return callback();
                    } else {
                        return callback(new Error('输入的旧密码不正确'));
                    }
                });
            } else {
                return callback(new Error('旧密码不能为空'));
            }
        };
        let validatePass = (rule, value, callback) => {
            if (value) {
                // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
                const passwordRule = /^[a-zA-Z]\w{5,17}$/;
                if (passwordRule.test(value)) {
                    return callback();
                } else {
                    return callback(new Error('字母开头,长度6-18之间,允许字母数字和下划线'));
                }
            } else {
                return callback(new Error('密码不能为空'));
            }
        };
        // 确认密码的校验方法
        let validateConfirmPass = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入确认密码'));
            }
            // 校验是否以密码一致
            if (this.staff.newPwd != '' && value === this.staff.newPwd) {
                return callback();
            } else {
                return callback(new Error('两次输入的密码不一致'));
            }
        };
        return {
            staff: {
                oldPwd: '',
                newPwd: '',
                confirmPwd: ''
            },
            ruleForm: {
                oldPwd: [{ required: true, validator: validateOldPass, trigger: 'blur' }],
                newPwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
                confirmPwd: [{ required: true, validator: validateConfirmPass, trigger: 'blur' }]
            }
        };
    },
    methods: {
        updatePwd() {
            this.$refs['staff'].validate(valid => {
                if (valid) {
                    let param = new URLSearchParams();
                    param.append('oldPwd', this.staff.oldPwd);
                    param.append('newPwd', this.staff.newPwd);
                    param.append('staff_number', localStorage.getItem('user_name'));
                    this.$axios({
                        method: 'put',
                        url: 'staff/reset-pwd',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    }).then(res => {
                        if (res.data.code == 1) {
                            this.$message.success(res.data.result);
                            // this.$router.go(0)
                        } else {
                            this.$message.info(res.data.result);
                        }
                    });
                } else {
                    return false;
                }
            });
        }
    },
    created() {}
};
</script>
<style>
</style>